<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setLocale scope="session" value="${param['language']}" />
<!DOCTYPE html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
    <head>
        <link rel="shortcut icon" href="./resources/images/ico.png" type="image/gif" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Babel Chat - <fmt:message key="about.title" /></title>
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <!-- Le styles -->
        <link href="css/prefs.css" rel="stylesheet">
        <link href="css/design.css" rel="stylesheet">
        <link href="css/estrutura.css" rel="stylesheet">
        <link href="./resources/bootstrap.css" rel="stylesheet">

        <script type="text/javascript">
            (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
        </script>
        <style type="text/css">
            body {
                padding-top: 40px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
        </style>
        <link href="./resources/bootstrap-responsive.css" rel="stylesheet">

        <!-- Le fav and touch icons -->
        <link rel="apple-touch-icon" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon-114x114.png">
    </head>

    <body>

        <div class="navbar navbar-fixed-top">

        <style type="text/css">
            /* Override some defaults */
            html, body {
                background-color: #eee;
            }
            body {
                padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
            }
            .container > footer p {
                text-align: center; /* center align it with the container */
            }
            .container {
                width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
            }

            /* The white background content wrapper */
            .container > .content {
                background-color: #fff;
                padding: 20px;
                margin: 0 -85px; /* negative indent the amount of the padding to maintain the grid system */
                -webkit-border-radius: 0 0 6px 6px;
                -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
            }

            /* Page header tweaks */
            .page-header {
                background-color: #f5f5f5;
                padding: 20px 20px 10px;
                margin: -20px -20px 20px;
            }

            /* Styles you shouldn't keep as they are for displaying this base example only */
            .content .span10,
            .content .span4 {
                min-height: 500px;
            }
            /* Give a quick and non-cross-browser friendly divider */
            .content .span4 {
                margin-left: 0;
                padding-left: 19px;
                border-left: 1px solid #eee;
            }

            .topbar .btn {
                border: 0;
            }

        </style>
           <jsp:include page="header.jsp" flush="true"/>
        </div>

        <div class="container">

            <div class="content">
                <div class="page-header">
                    <h1><fmt:message key="about.title" /><small> <fmt:message key="about.subtitle" /></small></h1>
                </div>
                <div class="row">
                    <div class="span10">
                       <!-- <h2><fmt:message key="about.main" /></h2>-->
     <div class="row-fluid">
         <div class="span4" style="border: none;">
         <br>
         <br><img src="imagens/peixes-about.png" width="250" height="450" alt="peixes-about"/>
         </div>
    
    <div class="span7">
 <h2>Visão</h2>
<p>Babel Chat liga você a novos horizontes através das salas de bate- papo, onde pode interagir com pessoas de qualquer parte do globo sem precisar se preocupar com as barreiras idiomáticas, pois ele traduz a conversa para seu idioma de forma automática e sem intervenções.
<hr>
<h2>Babel Chat, o Projeto</h2>
<p>O Babel Chat foi fundado e desenvolvido em Praia Grande - Brasil por alunos da Faculdade de Tecnologia (FATEC), um projeto que compreendia trazer maior praticidade e conhecimento para as salas de bate- papo e que inovasse e trouxesse um diferencial dos demais existentes na rede, sendo assim conta com o tradutor automático, o que possibilita a interação de pessoas de vários idiomas. Atualmente está disponível em mais de 35 idiomas, e continuam sendo adicionados. 
<hr>
<h2>Babel Chat na Sociedade</h2>
<p>O Babel Chat pode ser acessado e utilizado por qualquer pessoas que tenha acesso a internet. Basta acessar o site e fornecer suas informações básicas ou logar a partir de outras redes sociais. Agora basta pesquisar uma sala na qual se identifique com o assunto ou criar uma nova sala.
<hr>
<h2>Babel Chat para Empresas</h2>
<p>O Babel Chat pode ser utilizado nas empresas onde a matriz e suas franquias não compartilham do mesmo idioma, possibilitando a realização de reuniões e discussões com segurança e privacidade.
</div>
</div>
                    </div>
                    <div class="span10">
                        <hr>
                        <h3><fmt:message key="about.secondary" /></h3>
                    </div>
                </div>
            </div>

          <footer>
    <p style="text-align: center"><br>
        <a href="login.jsp"><fmt:message key="footer.login" /></a>&nbsp;&bull;&nbsp;
        <a href="index.jsp"><fmt:message key="footer.home" /></a>&nbsp;&bull;&nbsp;
        <a href="search.jsp"><fmt:message key="footer.pesquisar" /></a>&nbsp;&bull;&nbsp;
        <a href="signin.jsp"><fmt:message key="footer.cadastrar" /></a>&nbsp;&bull;&nbsp;
        <a href="recover.jsp"><fmt:message key="footer.recuperar" /></a>&nbsp;&bull;&nbsp;
        <a href="help.jsp"><fmt:message key="footer.ajuda" /></a>&nbsp;&bull;&nbsp;
        <a href="about.jsp"><fmt:message key="footer.sobre" /></a>&nbsp;&bull;&nbsp;
        <a href="developers.jsp"><fmt:message key="footer.programadores" /></a>&nbsp;&bull;&nbsp;
        <a href="terms.jsp"><fmt:message key="footer.termos" /></a>&nbsp;&bull;&nbsp;
        <a href="privacy.jsp"><fmt:message key="footer.privacidade" /></a><br>
        <span style="color: dimgrey">© BabelChat 2012</span>
        <br>
        <br>
    </p>
</footer>

            <!-- Le javascript
            ================================================== -->
            <!-- Placed at the end of the document so the pages load faster -->
            <script src="./resources/jquery.js"></script>
            <script src="./resources/bootstrap-transition.js"></script>
            <script src="./resources/bootstrap-alert.js"></script>
            <script src="./resources/bootstrap-modal.js"></script>
            <script src="./resources/bootstrap-dropdown.js"></script>
            <script src="./resources/bootstrap-scrollspy.js"></script>
            <script src="./resources/bootstrap-tab.js"></script>
            <script src="./resources/bootstrap-tooltip.js"></script>
            <script src="./resources/bootstrap-popover.js"></script>
            <script src="./resources/bootstrap-button.js"></script>
            <script src="./resources/bootstrap-collapse.js"></script>
            <script src="./resources/bootstrap-carousel.js"></script>
            <script src="./resources/bootstrap-typeahead.js"></script>

            <script type="text/javascript">
                $(document).ready(function() {
                    function closeDialog () {
                        $('#windowLoginDialog').modal('hide');
                    };
                    function okClicked () {
                        alert("Em Construção");
                        //$('#windowLoginDialog').modal('hide');
                    };
            </script>
            <!-- Instancia as Tooltips -->
            <script type="text/javascript">
                        !function($){
                        $(function (){
                            $('a[rel=tooltip]').tooltip();
                        });
                    }( window.jQuery )
            </script>
            <!--        fim                -->
            <script type="text/javascript">
                    document.title = "(3) "+document.title;
            </script>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
            <div id="fb-root"></div>
            <script>(function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s); js.id = id;
                    js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=247146371975479";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));</script>

            <div id="windowLoginDialog" data-backdrop="static" class="modal hide fade" style="display: none; ">
                <div class="modal-header">
                    <a href="http://bootstrapmodaldemo.scripting.com/#" class="close">×</a>
                    <h3><fmt:message key="index.login"/></h3>
                    <h4>Digite seu e-mail e sua senha para efetuar seu Login.</h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>
                            <div class="divDialogElements">
                                <input class="xlarge" id="user_email" name="user_email" type="Email" placeholder="Email">
                            </div>
                        </li>
                        <li>
                            <div class="divDialogElements">
                                <input id="user_password" name="user_password" type="password" placeholder="Password">
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="modal-footer">
                    <a href="#" class="btn primary" onclick="okClicked ();"><fmt:message key="btn.ok"/></a>
                    <a href="#" class="btn secondary" onclick="closeDialog ();"><fmt:message key="btn.cancel"/></a>
                </div>
            </div>
        </div>
    </body>
</html>